<template>
    <div class="pos-re">
        <input class="hb-input"
            :value="dvalue"
            :class="iptType"
            :type="_type"
            @focus="e_focu"
            @blur="e_blur"
            @input="e_input"
            v-model="inputed"
            @keypress.enter="$emit('etr')">
        <div class="msg pos-ab bb"
            :class="{die: !canShowMsg}"
            v-text="msgs[formType][lang]" />
        <slot />
    </div>
</template>

<script>
import {rules, msgs} from './rule'
export default {
	name: 'hb-input',
	props: {
		formType: {
			default: 'user',
		},
		back: {
			required: true,
		},
		must: {
			default: true,
		},
		dvalue: {
			default: '',
		},
		showMsgControl: {
			// 是否显示提示, false时不会在输入框上显示提示
			default: true,
		},
	},
	data() {
		return {
			iptType: 'will',
			msgs,
			canShowMsg: false,
			inputed: '',
		}
	},
	mounted() {},
	computed: {
		_type() {
			let t = 'text'
			if (this.formType.match(/password/i)) {
				t = 'password'
			}
			if (this.formType.match(/phone/i)) {
				t = 'number'
			}
			return t
		},
		lang() {
			return this.$store.state.setting.lang
		},
	},
	created() {},
	watch: {
		dvalue(v) {
			this.inputed = v
		},
	},
	methods: {
		e_focu() {
			this.iptType = 'focu'
			this.canShowMsg = false
			this.$emit('focuing', true)
		},
		e_blur() {
			this.check()
			this.showMsg()
			this.$emit('focuing', false)
		},
		e_input() {
			this.check()
		},
		check() {
			let re = false
			let s = this.inputed
			let re0 = rules[this.formType](s)
			let re1 = this.must === false && this.inputed === ''
			re = re0 || re1
			this.iptType = re ? '' : 'err'
			this.$emit('ipt', re, this.inputed, this.back)
		},
		showMsg() {
			if (this.iptType === 'err' && this.showMsgControl) {
				this.canShowMsg = true
			}
		},
	},
}
</script>

<style scoped>
.hb-input {
	outline-width: 0;
	width: 100%;
	height: 48px;
	border-radius: 4px;
	border-color: #4e5b85;
	padding-left: 20px;
	color: #c7cce6;
	background-color: #1e2235;
	font-size: 16px;
}
/*去除input number框的上下选择按钮*/
.hb-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}
.hb-input:focus {
	border-color: rgb(122, 152, 247);
}
.err {
	border-color: rgb(174, 78, 84);
}

.msg {
	top: -3px;
	left: 50%;
	transform: translate(-50%, -100%);
	box-shadow: 0 3px 5px #101018;
	border-radius: 4px;
	padding: 5px 15px;
	background-color: #262a42;
	font-size: 14px;
	color: #7a98f7;
}
.msg::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 12px;
	height: 12px;
	background-color: #262a42;
	transform: translate(-50%, 50%) rotate(45deg);
}
</style>